<template>
  <div class="msg">
    <!--短信列表-->
    <div class="msg-list">
      <div class="msg-title">短信列表</div>
      <div v-for="(item, index) in msgs" class="msg-text" @click="displayMsg(item, index)">{{ item.content }}
      </div>
      <div class="msg-btn"><el-button @click="createMsg">新建短信</el-button></div>
    </div>
    <!--发送短信面板-->
    <div v-if="msgSendVisible" class="msg-send-dialog">
      <div class="title">
        <span class="title-content">{{ titleContent }} </span>
        <i class="el-icon-circle-close" @click="closeMsgDialog" />
        <span class="title-tel">{{ titleTel }}</span>
      </div>
      <div ref="msgContent" class="msg-content">
        <div v-for="item in msgContents" class="content-text">
          <div class="text-date">{{ getDate(item) }}</div>
          <div :class="item.type == 0 ? 'text-send-time' : 'text-receive-time'">{{ getTime(item) }}</div>
          <div :class="item.type == 0 ? 'text-send-info' : 'text-receive-info'">
            <div class="info">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="msg-input">
        <el-input v-model="msgInput" type="textarea" :rows="3" placeholder="请输入短信内容" resize="none" />
        <el-button @click="sendMsg">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { showDetails, sendMessage } from '@/api/message'
import axios from 'axios'

export default {
  data() {
    return {
      msgs: [{
        sender: '70001005',
        receivePhoneNum: '13161669434',
        content: '葡萄美酒夜光杯，欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回？',
        createTime: '2024-04-16 20:36:16'
      },
      {
        sender: '70001005',
        receivePhoneNum: '13161669434',
        content: '葡萄美酒夜光杯，欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回？',
        createTime: '2024-04-16 21:36:16'
      },
      {
        sender: '70001005',
        receivePhoneNum: '13161669434',
        content: '葡萄美酒夜光杯，欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回？',
        createTime: '2024-04-16 22:36:16'
      }
      ],
      msgSendVisible: false,
      titleContent: '',
      titleTel: '',
      msgContents: [],
      msgInput: '',
      sender: '70001005',
      weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    }
  },
  updated() {
    this.$nextTick(() => {
      const container = this.$refs.msgContent
      if (container != null) { container.scrollTop = container.scrollHeight }
    })
  },
  methods: {
    displayMsg(item, index) {
      this.msgSendVisible = true
      this.titleContent = '隧道信息' + (index + 1).toString().padStart(2, '0')
      this.titleTel = item.receivePhoneNum
      this.sender = item.sender
      this.getMsgContent(this.sender, this.titleTel)
    },
    getMsgContent(sender, receivePhoneNum) {
      // 查询终端、调度台和某个电话的详细记录
      // showDetails(sender,receivePhoneNum).then(({ data }) => {
      //     this.msgContents = data.data.list
      // })
      axios.post('https://183.6.107.239:6443/client/shorMsg/details', null, {
        params: {
          sender,
          receivePhoneNum
        }
      }).then(({ data }) => {
        if (sender != null && receivePhoneNum != null) { this.msgContents = data.data.list } else { this.msgs = data.data.list }
      })
    },
    getDate(item) {
      if (item.type == 0) {
        const datetime = new Date(item.sendTime)
        const month = datetime.getMonth() + 1
        const day = datetime.getDate()
        const weekday = datetime.getDay()
        return month + '月' + day + '日' + ' ' + this.weekdays[weekday]
      } else if (item.type == 1) {
        const datetime = new Date(item.timeStamp)
        const month = datetime.getMonth() + 1
        const day = datetime.getDate()
        const weekday = datetime.getDay()
        return month + '月' + day + '日' + ' ' + this.weekdays[weekday]
      }
    },
    getTime(item) {
      if (item.type == 0) {
        const datetime = new Date(item.sendTime)
        const hour = datetime.getHours()
        const minute = datetime.getMinutes()
        const pm = hour < 12 ? '上午' : '下午'
        return pm + ' ' + hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0')
      } else if (item.type == 1) {
        const datetime = new Date(item.timeStamp)
        const hour = datetime.getHours()
        const minute = datetime.getMinutes()
        const pm = hour < 12 ? '上午' : '下午'
        return pm + ' ' + hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0')
      }
    },
    sendMsg() {
      // 发送短信
      // sendMessage({
      //     messageContent: this.msgInput,
      //     sender: this.sender,
      //     phoneSet: [this.titleTel]
      // }).then(({ data }) => {
      //     if (data.success) {
      //         this.$message({
      //             message: '发送成功',
      //             type: 'success'
      //         })
      //         this.msgInput = ''
      //         this.getMsgContent(this.sender,this.titleTel)
      //     } else {
      //         this.$message({
      //             message: '发送失败',
      //             type: 'error'
      //         })
      //     }
      // }).catch(() => {
      //     this.$message({
      //         message: '发送失败',
      //         type: 'error'
      //     })
      // })
      axios.post('https://183.6.107.239:6443/client/shorMsg/send', {
        messageContent: this.msgInput,
        sender: this.sender,
        phoneSet: [this.titleTel]
      }).then(({ data }) => {
        if (data.success) {
          this.$message({
            message: '发送成功',
            type: 'success'
          })
          this.msgInput = ''
          this.getMsgContent(this.sender, this.titleTel)
        } else {
          this.$message({
            message: '发送失败',
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: '发送失败',
          type: 'error'
        })
      })
    },
    closeMsgDialog() {
      this.msgSendVisible = false
      this.msgInput = ''
      this.msgContents = []
    },
    createMsg() {
      this.$router.push({
        path: '/szRobot/newMessage',
        query: { sender: this.sender }
      })
    }
  }
}
</script>

<style scoped>
.msg {
    width: 840px;
    height: 657px;
    margin: auto;
    display: flex;
    justify-content: center;

    .msg-list {
        position: relative;
        width: 360px;
        height: 657px;
        background: rgba(52, 65, 86, 1);

        .msg-title {
            width: 360px;
            height: 56px;
            display: flex;
            align-items: center;
            margin-left: 50px;
            font-size: 20px;
            font-weight: 700;
            color: rgba(0, 255, 255, 1);
        }

        .msg-text {
            width: 340px;
            height: 95px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            border-bottom: 1px solid rgba(135, 135, 135, 0.5);

        }

        .msg-text:hover {
            border: 0.79px solid rgba(117, 234, 255, 1);
            color: rgba(0, 255, 255, 1);
            cursor: pointer;
            box-shadow: inset 0px 0px 7.93px rgba(58, 242, 208, 1);
        }

        .msg-btn {
            position: absolute;
            bottom: 33px;
            width: 360px;
            height: 36px;
            display: flex;
            justify-content: center;

            .el-button {
                width: 117px;
                height: 36px;
                font-size: 16px;
                font-weight: 500;
                border-radius: 2px;
                background: rgba(7, 140, 116, 0.05);
                border: 0.79px solid rgba(90, 144, 153, 1);
                color: rgba(0, 255, 255, 1);

            }
        }
    }

    .msg-send-dialog {
        width: 480px;
        height: 657px;
        background: rgba(52, 65, 86, 1);
        border: 1px solid rgba(135, 135, 135, 0.5);

        .title {
            width: 100%;
            height: 56px;
            background: rgba(63, 79, 105, 1);
            padding: 8px 0 8px 20px;

            .title-content {
                width: 93px;
                height: 27px;
                font-size: 18px;
                font-weight: 500;
                color: rgba(223, 238, 243, 1);
                line-height: 26px;
            }

            .el-icon-circle-close {
                margin-left: 330px;
                font-size: 20px;
                font-weight: 500;
                color: rgba(223, 238, 243, 1);
                cursor: pointer;
            }

            .title-tel {
                display: block;
                line-height: 17px;
                width: 74px;
                height: 18px;
                font-size: 12px;
                font-weight: 400;
                color: rgba(223, 238, 243, 1);
            }
        }

        .msg-content {
            width: 100%;
            height: 480px;
            padding: 18px 20px 18px 20px;
            overflow-x: hidden;
            overflow-y: auto;
            /* IE 和 Edge 下隐藏滚动条 */
            -ms-overflow-style: none;
            /* Firefox 下隐藏滚动条 */
            scrollbar-width: none;

            .content-text {
                width: 100%;

                .text-date {
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(166, 166, 166, 1);
                }

                .text-receive-time {
                    text-align: left;
                    margin: 12px 0;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(166, 166, 166, 1);
                }

                .text-send-time {
                    text-align: right;
                    margin: 12px 0;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(166, 166, 166, 1);
                }

                .text-receive-info {
                    color: rgba(255, 255, 255, 1);
                }

                .text-send-info {
                    text-align: right;
                    color: rgba(0, 255, 255, 1);
                }

                .info {
                    display: inline-block;
                    padding: 15px;
                    background: rgba(63, 79, 105, 1);
                    font-size: 14px;
                    font-weight: 500;
                    margin-bottom: 18px;
                }
            }
        }

        .msg-content::-webkit-scrollbar {
            /* Chrome, Safari 和 Opera 下隐藏滚动条 */
            display: none;
        }

        .el-divider--horizontal {
            height: 1px;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(135, 135, 135, 0.5) 49.31%, rgba(255, 255, 255, 0) 100%);
            display: block;
            margin: 0;
        }

        .msg-input {
            width: 100%;
            height: 120px;
            padding: 20px;
            display: flex;
            align-items: center;

            .el-textarea {
                width: 340px;

                .el-textarea__inner {
                    background: rgba(40, 49, 64, 1);
                    border: none;
                    border-radius: 2px;
                    box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(0, 255, 255, 1);
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                }

                .el-textarea__inner::-webkit-scrollbar {
                    display: none;
                }

            }

            .el-button {
                margin: auto;
                width: 80px;
                height: 36px;
                border: 1px solid rgba(90, 144, 153, 1);
                border-radius: 2px;
                background: rgba(7, 140, 116, 0.05);
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 255, 255, 1);
            }
        }
    }
}
</style>
